<template>
  <view class="parking-finance-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">停车数据（财务）</text>
      <view class="header-actions">
        <view class="refresh-btn" @click="refreshData">
          <image src="/static/icons/refresh-icon.svg" class="refresh-icon" />
        </view>
        <view class="export-btn" @click="exportData">
          <text class="export-text">导出</text>
        </view>
      </view>
    </view>

    <!-- 筛选区域 -->
    <view class="filter-section">
      <view class="filter-row">
        <view class="filter-item">
          <text class="filter-label">停车场：</text>
          <picker :value="selectedParkIndex" :range="parkOptions" @change="onParkChange">
            <view class="picker-display">{{ parkOptions[selectedParkIndex] || '全部停车场' }}</view>
          </picker>
        </view>
        <view class="filter-item">
          <text class="filter-label">区域：</text>
          <picker :value="selectedAreaIndex" :range="areaOptions" @change="onAreaChange">
            <view class="picker-display">{{ areaOptions[selectedAreaIndex] || '全部区域' }}</view>
          </picker>
        </view>
      </view>
      
      <view class="filter-row">
        <view class="filter-item date-filter">
          <text class="filter-label">日期：</text>
          <picker mode="date" :value="startDate" @change="onStartDateChange">
            <view class="date-picker">{{ startDate || '开始日期' }}</view>
          </picker>
          <text class="date-separator">至</text>
          <picker mode="date" :value="endDate" @change="onEndDateChange">
            <view class="date-picker">{{ endDate || '结束日期' }}</view>
          </picker>
        </view>
      </view>

      <!-- 时间维度切换 -->
      <view class="time-dimension-tabs">
        <view 
          v-for="(tab, index) in timeTabs" 
          :key="index"
          class="tab-item"
          :class="{ active: activeTimeTab === index }"
          @click="switchTimeTab(index)"
        >
          {{ tab.label }}
        </view>
      </view>
    </view>

    <!-- 数据概览卡片 -->
    <view class="overview-section">
      <view class="overview-cards">
        <view class="overview-card">
          <view class="card-value">{{ formatNumber(overviewData.totalBerths) }}</view>
          <view class="card-label">总泊位数</view>
        </view>
        <view class="overview-card">
          <view class="card-value">{{ formatNumber(overviewData.totalParkings) }}</view>
          <view class="card-label">停车次数</view>
        </view>
        <view class="overview-card">
          <view class="card-value">{{ formatMoney(overviewData.totalReceivable) }}</view>
          <view class="card-label">订单应收</view>
        </view>
        <view class="overview-card">
          <view class="card-value">{{ formatMoney(overviewData.totalReceived) }}</view>
          <view class="card-label">订单实收</view>
        </view>
      </view>
      
      <view class="overview-cards">
        <view class="overview-card">
          <view class="card-value">{{ formatMoney(overviewData.historicalPayment) }}</view>
          <view class="card-label">历史补缴</view>
        </view>
        <view class="overview-card">
          <view class="card-value">{{ formatMoney(overviewData.berthRevenue) }}</view>
          <view class="card-label">泊位收益</view>
        </view>
        <view class="overview-card">
          <view class="card-value">{{ formatPercent(overviewData.collectionRate) }}</view>
          <view class="card-label">收缴率</view>
        </view>
        <view class="overview-card">
          <view class="card-value">{{ formatPercent(overviewData.occupancyRate) }}</view>
          <view class="card-label">泊位利用率</view>
        </view>
      </view>
    </view>

    <!-- 停车场收益排行 -->
    <view class="ranking-section">
      <view class="section-title">停车场收益排行</view>
      <view class="ranking-list">
        <view 
          v-for="(item, index) in parkingRanking" 
          :key="index"
          class="ranking-item"
        >
          <view class="ranking-number">{{ index + 1 }}</view>
          <view class="parking-info">
            <text class="parking-name">{{ item.name }}</text>
            <text class="parking-area">{{ item.area }}</text>
          </view>
          <view class="revenue-info">
            <text class="revenue-amount">{{ formatMoney(item.revenue) }}</text>
            <text class="revenue-change" :class="item.changeRate >= 0 ? 'positive' : 'negative'">
              {{ item.changeRate >= 0 ? '+' : '' }}{{ formatPercent(item.changeRate) }}
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 详细数据表格 -->
    <view class="table-section">
      <view class="section-title">详细财务数据</view>
      <scroll-view scroll-x class="table-scroll">
        <view class="data-table">
          <view class="table-header">
            <view class="table-cell header-cell">停车场</view>
            <view class="table-cell header-cell">泊位数</view>
            <view class="table-cell header-cell">停车次数</view>
            <view class="table-cell header-cell">订单应收</view>
            <view class="table-cell header-cell">订单实收</view>
            <view class="table-cell header-cell">历史补缴</view>
            <view class="table-cell header-cell">泊位收益</view>
            <view class="table-cell header-cell">收缴率</view>
          </view>
          <view 
            v-for="(row, index) in tableData" 
            :key="index"
            class="table-row"
          >
            <view class="table-cell">{{ row.parkingName }}</view>
            <view class="table-cell">{{ formatNumber(row.berthCount) }}</view>
            <view class="table-cell">{{ formatNumber(row.parkingCount) }}</view>
            <view class="table-cell">{{ formatMoney(row.receivable) }}</view>
            <view class="table-cell">{{ formatMoney(row.received) }}</view>
            <view class="table-cell">{{ formatMoney(row.historicalPayment) }}</view>
            <view class="table-cell">{{ formatMoney(row.revenue) }}</view>
            <view class="table-cell">{{ formatPercent(row.collectionRate) }}</view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 数据详情弹窗 -->
    <up-popup v-model:show="showDetailPopup" overlay mode="bottom" touchable maxHeight="'80%'" closeable closeOnClickOverlay @close="closeDetailPopup">
      <view class="detail-popup">
        <view class="popup-header">
          <text class="popup-title">{{ selectedParkingDetail.name }}</text>
        </view>
        <view class="popup-content">
          <view class="detail-item">
            <text class="detail-label">泊位总数：</text>
            <text class="detail-value">{{ formatNumber(selectedParkingDetail.berthCount) }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">停车次数：</text>
            <text class="detail-value">{{ formatNumber(selectedParkingDetail.parkingCount) }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">订单应收：</text>
            <text class="detail-value">{{ formatMoney(selectedParkingDetail.receivable) }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">订单实收：</text>
            <text class="detail-value">{{ formatMoney(selectedParkingDetail.received) }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">历史补缴：</text>
            <text class="detail-value">{{ formatMoney(selectedParkingDetail.historicalPayment) }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">泊位收益：</text>
            <text class="detail-value">{{ formatMoney(selectedParkingDetail.revenue) }}</text>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'

// 响应式数据
const selectedParkIndex = ref(0)
const selectedAreaIndex = ref(0)
const startDate = ref('')
const endDate = ref('')
const activeTimeTab = ref(0)
const loading = ref(false)
const showDetailPopup = ref(false)

// 筛选选项
const parkOptions = ref(['全部停车场', '中心广场停车场', '商业街停车场', '住宅区停车场', '办公楼停车场'])
const areaOptions = ref(['全部区域', '市中心', '商业区', '住宅区', '工业区'])

// 时间维度选项
const timeTabs = ref([
  { label: '日累计', value: 'day' },
  { label: '月累计', value: 'month' },
  { label: '年累计', value: 'year' }
])

// 概览数据
const overviewData = reactive({
  totalBerths: 1250,
  totalParkings: 8640,
  totalReceivable: 125600.50,
  totalReceived: 118900.30,
  historicalPayment: 15600.80,
  berthRevenue: 134501.10,
  collectionRate: 0.947,
  occupancyRate: 0.782
})

// 停车场排行数据
const parkingRanking = ref([
  { name: '中心广场停车场', area: '市中心', revenue: 45600.50, changeRate: 0.125 },
  { name: '商业街停车场', area: '商业区', revenue: 38900.30, changeRate: 0.089 },
  { name: '住宅区停车场', area: '住宅区', revenue: 28700.80, changeRate: -0.032 },
  { name: '办公楼停车场', area: '商业区', revenue: 21300.50, changeRate: 0.156 },
  { name: '医院停车场', area: '市中心', revenue: 18900.20, changeRate: 0.067 }
])

// 表格数据
const tableData = ref([
  {
    parkingName: '中心广场停车场',
    berthCount: 320,
    parkingCount: 2150,
    receivable: 45600.50,
    received: 43200.30,
    historicalPayment: 5600.80,
    revenue: 48801.10,
    collectionRate: 0.947
  },
  {
    parkingName: '商业街停车场',
    berthCount: 280,
    parkingCount: 1890,
    receivable: 38900.30,
    received: 36700.50,
    historicalPayment: 4200.60,
    revenue: 40901.10,
    collectionRate: 0.943
  },
  {
    parkingName: '住宅区停车场',
    berthCount: 250,
    parkingCount: 1650,
    receivable: 28700.80,
    received: 27100.20,
    historicalPayment: 3100.40,
    revenue: 30200.60,
    collectionRate: 0.944
  },
  {
    parkingName: '办公楼停车场',
    berthCount: 200,
    parkingCount: 1420,
    receivable: 21300.50,
    received: 20100.80,
    historicalPayment: 2700.00,
    revenue: 22800.80,
    collectionRate: 0.944
  },
  {
    parkingName: '医院停车场',
    berthCount: 200,
    parkingCount: 1530,
    receivable: 18900.20,
    received: 17800.50,
    historicalPayment: 2000.00,
    revenue: 19800.50,
    collectionRate: 0.942
  }
])

// 选中的停车场详情
const selectedParkingDetail = reactive({
  name: '',
  berthCount: 0,
  parkingCount: 0,
  receivable: 0,
  received: 0,
  historicalPayment: 0,
  revenue: 0
})

// 格式化函数
const formatNumber = (value) => {
  return (value || 0).toLocaleString()
}

const formatMoney = (value) => {
  return `¥${(value || 0).toFixed(2)}`
}

const formatPercent = (value) => {
  return `${((value || 0) * 100).toFixed(1)}%`
}

// 事件处理函数
const onParkChange = (e) => {
  selectedParkIndex.value = e.detail.value
  loadData()
}

const onAreaChange = (e) => {
  selectedAreaIndex.value = e.detail.value
  loadData()
}

const onStartDateChange = (e) => {
  startDate.value = e.detail.value
  loadData()
}

const onEndDateChange = (e) => {
  endDate.value = e.detail.value
  loadData()
}

const switchTimeTab = (index) => {
  activeTimeTab.value = index
  loadData()
}

const refreshData = () => {
  uni.showToast({
    title: '数据刷新中...',
    icon: 'loading',
    duration: 1000
  })
  setTimeout(() => {
    loadData()
    uni.showToast({
      title: '刷新成功',
      icon: 'success',
      duration: 1000
    })
  }, 1000)
}

const exportData = () => {
  uni.showToast({
    title: '导出功能开发中',
    icon: 'none',
    duration: 2000
  })
}

const loadData = () => {
  loading.value = true
  // 模拟数据加载
  setTimeout(() => {
    loading.value = false
  }, 500)
}

const showParkingDetail = (parking) => {
  Object.assign(selectedParkingDetail, parking)
  showDetailPopup.value = true
}

const closeDetailPopup = () => {
  showDetailPopup.value = false
}

// 页面加载时初始化数据
onMounted(() => {
  // 设置默认日期范围（最近30天）
  const today = new Date()
  const thirtyDaysAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000)
  
  endDate.value = today.toISOString().split('T')[0]
  startDate.value = thirtyDaysAgo.toISOString().split('T')[0]
  
  loadData()
})
</script>

<style scoped>
.parking-finance-page {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.refresh-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #007aff;
  border-radius: 50%;
}

.refresh-icon {
  width: 32rpx;
  height: 32rpx;
}

.export-btn {
  padding: 12rpx 24rpx;
  background-color: #28a745;
  border-radius: 8rpx;
}

.export-text {
  color: white;
  font-size: 28rpx;
}

/* 筛选区域 */
.filter-section {
  background-color: white;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  flex-wrap: wrap;
  gap: 20rpx;
}

.filter-row:last-child {
  margin-bottom: 0;
}

.filter-item {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 200rpx;
}

.filter-label {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
  white-space: nowrap;
}

.picker-display,
.date-picker {
  padding: 12rpx 20rpx;
  background-color: #f8f9fa;
  border-radius: 6rpx;
  font-size: 28rpx;
  color: #333;
  border: 1rpx solid #e9ecef;
  min-width: 120rpx;
  text-align: center;
}

.date-filter {
  display: flex;
  align-items: center;
  flex: 2;
}

.date-separator {
  margin: 0 10rpx;
  color: #666;
  font-size: 24rpx;
}

.time-dimension-tabs {
  display: flex;
  margin-top: 20rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  padding: 4rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  font-size: 28rpx;
  color: #666;
  border-radius: 6rpx;
  transition: all 0.3s;
}

.tab-item.active {
  background-color: #007aff;
  color: white;
}

/* 概览卡片 */
.overview-section {
  margin-bottom: 20rpx;
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  margin-bottom: 20rpx;
  padding: 10rpx 0;
}

.overview-card {
  background-color: white;
  border-radius: 12rpx;
  padding: 30rpx 20rpx;
  text-align: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.card-label {
  font-size: 24rpx;
  color: #666;
}

/* 排行榜 */
.ranking-section {
  background-color: white;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
}

.ranking-number {
  width: 60rpx;
  height: 60rpx;
  background-color: #007aff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 20rpx;
}

.parking-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.parking-name {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.parking-area {
  font-size: 24rpx;
  color: #666;
  margin-top: 5rpx;
}

.revenue-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.revenue-amount {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.revenue-change {
  font-size: 24rpx;
  margin-top: 5rpx;
}

.revenue-change.positive {
  color: #28a745;
}

.revenue-change.negative {
  color: #dc3545;
}

/* 数据表格 */
.table-section {
  background-color: white;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.table-scroll {
  width: 100%;
}

.data-table {
  min-width: 1200rpx;
}

.table-header,
.table-row {
  display: flex;
  border-bottom: 1rpx solid #e9ecef;
}

.table-header {
  background-color: #f8f9fa;
}

.table-cell {
  flex: 1;
  padding: 20rpx 10rpx;
  text-align: center;
  font-size: 26rpx;
  min-width: 150rpx;
}

.header-cell {
  font-weight: bold;
  color: #333;
}

.table-row .table-cell {
  color: #666;
}

/* 详情弹窗 */
.detail-popup {
  background-color: white;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 80vh;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #e9ecef;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  color: #666;
}

.popup-content {
  padding: 30rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: 28rpx;
  color: #666;
}

.detail-value {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}
</style>